<template>
  <!-- 离线记录弹窗 ${rowData.stationName}-->
  <a-modal
    v-model:open="visible"
    @ok="handleOk"
    destroyOnClose
    :width="1000"
    @cancel="cancel"
    :footer="null"
    centered
  >
    <template #title>
      <span style="font-size: 22px">
        【{{ rowData.stationName }}】历史离线记录
        <a-select
          v-model:value="filterForm.equipType"
          class="formSelect"
          placeholder="请选择"
          :size="'small'"
          allow-clear
          @change="changeEquipType"
        >
          <a-select-option
            v-for="item in OFFLINE_TYPE"
            :value="item.value"
            :key="item.value"
          >
            {{ item.label }}
          </a-select-option>
        </a-select>
      </span>
    </template>
    <a-table
      :dataSource="tableData"
      :columns="columns"
      size="small"
      @resizeColumn="handleResizeColumn"
      :pagination="false"
      :loading="tableLoading"
      bordered
    >
    </a-table>
    <a-pagination
      v-model:current="filterForm.current"
      v-model:page-size="filterForm.size"
      :total="total"
      position="bottomRight"
      show-size-changer
      @change="getOfflineRecordHistoryPage"
      :show-total="(total) => `总共 ${total} 条`"
    >
      <template #buildOptionText="props">
        <span>{{ props.value }}条/页</span>
      </template>
    </a-pagination>
  </a-modal>
</template>
<script setup>
// 
import { ONLINE_STATUS, OFFLINE_TYPE } from "@/constants/stationConfig"

import { formatMillisecondsToDHM } from "@/utils/common"
const $api = inject("$api")
const props = defineProps({
  tempDataVisible: {
    type: Boolean,
    default: false,
  },
  rowData: {
    type: Object,
  },
})
const fileList = ref([])
const visible = ref(props.tempDataVisible)
// const visible = ref(true);
const addParamVisible = ref(false)
const emits = defineEmits(["update:tempDataVisible"])
watch(
  () => props.tempDataVisible,
  (val) => {
    visible.value = val
    if (val) {
      console.log("props.rowData", props.rowData)
      filterForm.value.stationId = props.rowData.stationId
      getOfflineRecordHistoryPage()
    }
  }
)

const total = ref()
const filterForm = ref({
  equipType: undefined,
  stationId: undefined,
  current: 1,
  size: 10,
})
const tableLoading = ref(false)
const tableData = ref([])
const isEdit = ref(false)
const columns = ref([
  {
    title: "离线类型",
    dataIndex: "equipTypeName",
    key: "equipTypeName",
    width: 160,
    resizable: true,
    align: "center",
  },
  {
    title: "离线设备名称",
    dataIndex: "equipName",
    key: "equipName",
    width: 160,
    resizable: true,
    align: "center",
  },
  {
    title: "离线时间",
    dataIndex: "offLineTime",
    key: "offLineTime",
    width: 160,
    resizable: true,
    align: "center",
  },
  {
    title: "上线时间",
    dataIndex: "onlineTime",
    key: "onlineTime",
    width: 160,
    resizable: true,
    align: "center",
  },
  {
    title: "离线时长",
    dataIndex: "offDuration",
    key: "offDuration",
    width: 160,
    resizable: true,
    align: "center",
  },
])
const cancel = () => {
  emits("update:tempDataVisible", false)
  console.log("cancel")
}
// 历史离线记录数据
const equipTypeNameMap = {
  1: "电池堆",
  2: "结算电表",
  3: "摄像头",
}

const getOfflineRecordHistoryPage = async () => {
  tableLoading.value = true
  const res = await $api.offlineRecordHistoryPage(filterForm.value)
  tableLoading.value = false
  if (res && res.code === 0) {
    tableData.value = res.data.records.map((item) => ({
      ...item,
      offDuration: item.hasOwnProperty("offDuration")
        ? formatMillisecondsToDHM(item.offDuration)
        : "--",
      equipTypeName: equipTypeNameMap[item.equipType], // 替换为中文描述
    }))
    total.value = res.data.total
  }
}
const changeEquipType = (val) => {
  filterForm.value.equipType = val
  getOfflineRecordHistoryPage()
}
onMounted(() => {})
</script>

<style lang="less" scoped>
.ant-table {
  .ant-btn {
    padding: 4px 5px;
  }
}
.tableContent {
  border-radius: 4px;
  background-color: #141414;
  padding: 8px;
}
.filterBtn {
  margin: 0 20px 20px 0;
  &:last-child {
    margin-right: 0;
  }
}
.formSelect {
  width: 120px;
  vertical-align: text-bottom;
  margin-left: 10px;
}
.upLoad {
  margin-right: 20px;
}
</style>
